'use client';

import { querySectionDetailsById } from '@/services/api';
import { useQuery } from '@tanstack/react-query';
import type { ISectionDetails } from '@/interfaces';
import { useContext } from 'react';
import Alert from '@/app/[locale]/alert/alert';
import { SectionAdminContext } from '@/contexts/admin/forum/section';
import AlertLoad from '@/app/[locale]/alert/load';
import QuerySectionInfo from '@/app/[locale]/admin/forum/section/detail/info';
import QuerySectionTag from '@/app/[locale]/admin/forum/section/detail/tag';
import QuerySectionTagGroup from '@/app/[locale]/admin/forum/section/detail/tagGroup';
import QuerySectionSectionGroup from '@/app/[locale]/admin/forum/section/detail/sectionGroup';
import QuerySectionAdmin from '@/app/[locale]/admin/forum/section/detail/admin';
import QuerySectionContent from '@/app/[locale]/admin/forum/section/detail/content';

export default function DetailsSectionAdminPage() {
  const context = useContext(SectionAdminContext);

  const querySectionDetailsByIdQuery = useQuery(
    ['/forum', '/sections', context.detailItem?.id, '/details'],
    async (context) => {
      return (await querySectionDetailsById({
        id: context.queryKey[2] + '',
      })) as ISectionDetails;
    },
  );

  if (querySectionDetailsByIdQuery.data) {
    const data = querySectionDetailsByIdQuery.data;

    return (
      <div className="row">
        <div className="col">
          <div className="vstack gap-4">
            <QuerySectionInfo details={data} />

            <div className="row">
              <div className="col">
                <QuerySectionTag details={data} />
              </div>
              <div className="col">
                <QuerySectionTagGroup details={data} />
              </div>
              <div className="col">
                <QuerySectionSectionGroup details={data} />
              </div>
              <div className="col">
                <QuerySectionAdmin details={data} />
              </div>
            </div>

            <QuerySectionContent details={data} />

            <div></div>
          </div>
        </div>
      </div>
    );
  }

  if (querySectionDetailsByIdQuery.error) {
    return <Alert type="error" message={querySectionDetailsByIdQuery.error} />;
  }

  return <AlertLoad />;
}
